<template>
	<view class="purchase-commission-page">
		<view class="form-container">
			<view class="form-item">
				<view class="label">收货人姓名</view>
				<input type="text" placeholder="请输入收货人姓名" v-model="form.name" class="input">
			</view>

			<view class="form-item">
				<view class="label">联系电话</view>
				<input type="number" placeholder="请输入联系电话" v-model="form.mobile" class="input">
			</view>
			
			<view class="form-item">
				<view class="label">护士服尺码</view>
				<input type="text" placeholder="可选S/M/L/XL/XXL" v-model="form.consumableSize" class="input">
			</view>

			<view class="form-item">
				<view class="label">收货地址</view>
				<input type="text" placeholder="请输入收货地址" v-model="form.address" class="input">
			</view>

			<view class="form-item">
				<view class="label">详细地址</view>
				<input type="text" placeholder="请输入详细收货地址" v-model="form.addressDetail" class="input">
			</view>
			<view class="submit-btn" @click="handleSubmit">
				提交领取
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getNurseBag
	} from '@/apis/nurse/index.js'
	export default {
		data() {
			return {
				form: {
					name: '',
					mobile: '',
					address: '',
					addressDetail: '',
					consumableSize: '',
					id: ''
				}
			}
		},
		onLoad(opt) {
			if(opt.id) {
				this.form.id = opt.id
			} 
		},
		methods: {
			handleSubmit() {
				// 简单表单校验
				if (!this.form.name || !this.form.consumableSize || !this.form.mobile || !this.form.address || !this.form.addressDetail) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					});
					return;
				}
				
				// 此处可添加接口提交逻辑（示例：打印表单数据）
				console.log('提交的地址信息：', this.form);
				getNurseBag(this.form).then(res => {
					if(res.success) {
						uni.showToast({
							title: '提交成功'
						})
						setTimeout(()=>{
							uni.navigateBack();
						},300)
					}
				})
				// 提交成功后返回上一页
			}
		}
	}
</script>

<style lang="less" scoped>
	.purchase-commission-page {
		background: #F7F7F7;
		margin: 0rpx;
		overflow: hidden;
	}

	.form-container {
		background: #fff;
		padding: 22rpx 38rpx 22rpx 37rpx;
		border-radius: 20rpx;

	}

	.form-item {
		margin-bottom: 30rpx;
	}

	.label {
		font-size: 24rpx;
		color: #1A1A1A;
		margin-bottom: 10rpx;
		left: 0rpx;
		top: 0rpx;
		width: 120rpx;
		height: 34rpx;

	}

	.input {
		height: 80rpx;
		border: 1rpx solid #E5E5E5;
		border-radius: 10rpx;
		padding: 0 20rpx;
		color: #666;
		margin-top: 8rpx;
		margin-bottom: 20rpx;
		font-family: 思源黑体;
		font-size: 32rpx;
	}

	.submit-btn {
		width: 100%;
		height: 100rpx;
		background: linear-gradient(90deg, #FFE4BE, #F0BB75);
		font-size: 32rpx;
		color: #894200;
		text-align: center;
		line-height: 90rpx;
		font-weight: 500;
		border-radius: 60rpx;
		margin-top: 558rpx;
		margin-bottom: 44rpx;
		display: inline-block;

	}
</style>